<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>移动端手势密码组件</title>

    <style type="text/css">
        html,
        body,
        div,
        p {
            margin: 0;
            padding: 0;
        }
        
        #hea-com {
            height: 40px;
            padding: 5px 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: yellow;
        }
        
        #hea-com>span:last-of-type {
            opacity: 0;
        }
        
        .mui-locker {
            margin: 35px auto;
            display: block;
        }
        
        .avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        
        .notice {
            text-align: center;
            font-size: 15px;
            font-weight: 100;
        }
    </style>
</head>

<body>
    <div id="hea-com">
        <span @click='close'>取消</span>
        <span>设置手势密码</span>
        <span>2</span>
    </div>
    <div class='avatar'>
        <img src="./img/a.png" width="80px" height="80px">
    </div>
    <h1 class='notice'>绘制解锁图案</h1>
    <div class="mui-locker" data-locker-width='320' data-locker-height='320' data-locker-options='{"ringColor":"#7bdcf0","fillColor":"#ffffff","pointColor":"#7bdcf0","lineColor":"#7bdcf0"}'>
    </div>
    <script src="js/mui.min.js "></script>
    <script src="js/mui.locker.js"></script>
    <script type="text/javascript">
        //锁屏设置
        (function($, doc) {
            $.plusReady(function() {
				
				mui.back = function(){
					plus.webview.currentWebview().close();
				};
				
				
                var locker = doc.querySelector('.mui-locker');
                var notice = doc.querySelector('.notice');
                var record = [];
                locker.addEventListener('done', function(event) {
                    var rs = event.detail;
                    if (rs.points.length < 4) {
                        //没有连接到4个点
                        notice.innerHTML = '至少连接4个点';
                        notice.style.color = 'red';
                        record = [];
                        rs.sender.clear();
                        return;
                    }
                    record.push(rs.points.join(''));
                    if (record.length >= 2) {
                        if (record[0] == record[1]) {
                            //设置成功
                            notice.innerHTML = '绘制图案';
                            plus.nativeUI.toast('设置成功，请牢记你的手势密码', {
                                verticalAlign: 'center'
                            });
                            localStorage.setItem('shouPassword', record[0]);
                            setTimeout(function() {
								plus.webview.getLaunchWebview().show();
								setTimeout(function(){
									plus.webview.currentWebview().close();
								},500);
                            }, 2000);
                            return;
                        } else {
                            //两次密码不统一
                            notice.innerHTML = '绘制图案';
                            notice.style.color = 'black';
                            plus.nativeUI.toast('两次手势不一致,请重新设定', {
                                verticalAlign: 'center'
                            });
                        }
                        rs.sender.clear();
                        record = [];
                    } else {
                        //第一次绘制通过
                        notice.innerHTML = '再次绘制解锁图案';
                        notice.style.color = 'black';
                        rs.sender.clear();
                    }
                }, false);
            });
        }(mui, document));
    </script>
</body>

</html>